@use '@scss/common' as *;

.node {
  letter-spacing: 0;

  scroll-margin-top: calc(var(--header-height) + 1rem);
  position: relative;

  * {
    color: var(--theme-text);
  }

  &:hover {
    .linkedHeading {
      opacity: 0.75;
    }
  }
}

.node .linkedHeading {
  position: absolute;
  transform: translate(-50%, -40%);
  transition: opacity 200ms ease;
  opacity: 0.25;
  top: 50%;
  left: -1.15rem;

  @include small-break {
    transform: translate(-50%, -50%) scale(0.65);
    left: -0.5rem;
  }
}
